<template>
  <view class="wrapper">
    <image class="imgSty" src="http://jiyaqi-mall.oss-cn-hangzhou.aliyuncs.com/pet/pic/1679033103831img01.png"
      mode="widthFix"></image>
    <image class="imgSty" src="http://jiyaqi-mall.oss-cn-hangzhou.aliyuncs.com/pet/pic/1679033166425img02.png"
      mode="widthFix"></image>
    <view class="preview">
      <view class="preview-b">
        <image @click="previewImage([credential])" class="credential" :src="credential" mode="scaleToFill" />
      </view>
    </view>
    <image class="imgSty" src="http://jiyaqi-mall.oss-cn-hangzhou.aliyuncs.com/pet/pic/1679033260473img03.png"
      mode="widthFix"></image>
    <view class="imgBox">
      <view class="imgBox-item" v-for="(item, index) in credentialList" :key="index">
        <image class="imgBox-img" @click="previewImage(credentialList, index)" :src="item" mode="heightFix" />
      </view>
    </view>
    <image class="imgSty" src="http://jiyaqi-mall.oss-cn-hangzhou.aliyuncs.com/pet/pic/1679033284377img04.png"
      mode="widthFix"></image>
    <view class="imgBox">
      <view class="imgBox-item" v-for="(item, index) in credentialList2" :key="index">
        <image class="imgBox-img" @click="previewImage(credentialList2, index)" :src="item" mode="heightFix" />
      </view>
    </view>
  </view>
</template>

<script>
import pageMixin from "@/mixins/pageMixin";

export default {
  mixins: [pageMixin],
  data () {
    return {
      credential: 'http://jiyaqi-mall.oss-cn-hangzhou.aliyuncs.com/pet/pic/1679033227593credential.jpg',
      credentialList: [
        'http://jiyaqi-mall.oss-cn-hangzhou.aliyuncs.com/pet/pic/1679033353422zj01.jpg',
        'http://jiyaqi-mall.oss-cn-hangzhou.aliyuncs.com/pet/pic/1679033370789zj02.jpg',
        'http://jiyaqi-mall.oss-cn-hangzhou.aliyuncs.com/pet/pic/1679033388728zj03.jpg',
        'http://jiyaqi-mall.oss-cn-hangzhou.aliyuncs.com/pet/pic/1679033405080zj04.jpg',
        'http://jiyaqi-mall.oss-cn-hangzhou.aliyuncs.com/pet/pic/1679033422506zj05.jpg',
        'http://jiyaqi-mall.oss-cn-hangzhou.aliyuncs.com/pet/pic/1679033438143zj06.jpg',
        'http://jiyaqi-mall.oss-cn-hangzhou.aliyuncs.com/pet/pic/1679033453951zj07.jpg',
        'http://jiyaqi-mall.oss-cn-hangzhou.aliyuncs.com/pet/pic/1679033469727zj08.jpg',
      ],
      credentialList2: [
        'http://jiyaqi-mall.oss-cn-hangzhou.aliyuncs.com/pet/pic/1679033307702sp01.jpg',
        'http://jiyaqi-mall.oss-cn-hangzhou.aliyuncs.com/pet/pic/1679033332192sp02.jpg'
      ]
    }
  }
}
</script>

<style lang="scss" >
.imgSty {
  width: 100vw;

  img {
    width: 100%;
  }
}

.imgBox {
  padding: 32rpx;
  background-color: #ffffff;
  display: flex;
  flex-wrap: wrap;

  &-item {
    margin-right: 2%;
    margin-bottom: 16rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 49%;
    padding: 16rpx 0;
    height: 250rpx;
    box-sizing: border-box;
    background-color: #F5F6F7;

    &:nth-child(2n) {
      margin-right: 0rpx;
    }
  }

  &-img {
    height: 100%;
  }
}

.preview {
  padding: 32rpx 0;
  background-color: #ffffff;
  display: flex;
  justify-content: center;

  &-b {
    display: inline-block;
    padding: 33rpx 37rpx;
    background-color: #F5F6F7;

    .credential {
      width: 326rpx;
      height: 233rpx;
    }
  }
}
</style>
